<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐排行榜</title>
    <!-- Bootstrap CSS -->
    <link href="../../plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../../plugins/bootstrap/js/bootstrap.js" rel="stylesheet">
    <link rel="stylesheet" href="../css/outer.css">
    <style>
        @import url(../../nav.css);

    </style>
    </head>
    <body>
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <!-- 导航栏 -->
                <ul class="nav navbar-nav">
                    <li class="active"><a href="../../index.html">首页</a></li>
                    <li><a href="..\..\view\topChart\rank.html">排行榜</a></li>
                    <li><a href="..\..\view\playList\playlist.html">歌单</a></li>
                </ul>
                
                <!-- 登录按钮 -->
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" data-toggle="modal" data-target="#myModal">登录</a></li>
                    <li><img id="nav_img" src="../../img/1.png"></li>
                </ul>
    
                <!-- 搜索框 -->
            <form class="navbar-form navbar-right" id="searchForm">
                <div class="form-group">
                    <input type="text" class="form-control" id="searchInput" placeholder="搜索音乐">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
    
            </div>
        </div>
    
        <!-- 模态框（Modal）-begin -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">用户登录入口
                            
                        </h4>
                    </div>
                    <div class="modal-body">
                        <!-- 登录表单   -begin -->
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">邮箱</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="firstname" placeholder="请输入邮箱">
                            </div>
                            <div class="col-md-2" style="margin-left: -20px;">
                                <button type="button" class="btn btn-success">发送验证码</button>
                            </div>
                            </div>
                            <div class="form-group">
                            <label for="lastname" class="col-sm-2 control-label">验证码</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="lastname" placeholder="请输入验证码">
                            </div>
                            </div>
                            <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <div class="checkbox">
                                <label>
                                    <input type="checkbox">请记住我
                                </label>
                                </div>
                            </div>
                            </div>
                            <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" class="btn btn-default">登录</button>
                            </div>
                            </div>
                        </form>
                        <!-- 登录表单 -end -->
                    </div>
                    <div class="modal-footer">
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
        <!-- 模态框（Modal）- end -->
    </nav>

    <!-- 排行榜表格 -->
    <div class="container">
        <div class="row">
            <!-- 榜单 -->
            <div class="col-md-2">
                <h3>特色榜</h3>
                <div class="row"><img src="" alt=""></div>
                <div class="row"><img src="" alt=""></div>
                <div class="row"><img src="" alt=""></div>
                <div class="row"><img src="" alt=""></div>
                <div class="row"><img src="" alt=""></div>
            </div>

            <!-- 表格 -->
            <div class="col-md-9">
                <div class="row">
                    <!-- 分两行 -->

                    <!-- 上侧展示行 -->
                    <div class="row">
                        <!-- 图片 -->
                        <div class="col-md-4">
                            <div class="photo-frame">
                                <img src="http://p2.music.126.net/rIi7Qzy2i2Y_1QD7cd0MYA==/109951170048506929.jpg?param=150y150"
                                    alt="">
                            </div>
                        </div>
                   

                        <!-- 图片右侧信息展示 -->
                        <div class="col-md-8">
                            
                            <div class="row" style="margin-top: 30px;">
                                <span style="color: #555; height: 30px; font-size:larger;">
                                    飙升榜
                                </span>
                            </div>

                            <!-- 图标 -->
                            <div class="row">
                                <span class="col-md-1 glyphicon glyphicon-time" style="padding-left: 0px;"></span>
                                <span class="col-md-6" style="color:#555; padding-left: 0px;margin-left: -25px;font-size: smaller;">最近更新：2025.3.2</span>
                            </div>

                            <!-- 播放等按钮 -->
                            <div class="container mt-4">
                                <div class="btn-group btn-group-custom">
                                    <!-- 播放按钮 -->
                                    <button type="button" class="btn btn-primary">
                                        <i class="bi bi-play-fill"></i> 播放
                                    </button>
                        
                                    <!-- 加入歌单按钮 -->
                                    <button type="button" class="btn btn-light">
                                        <i class="bi bi-folder-plus"></i> 加入歌单
                                    </button>
                        
                                    <!-- 转发按钮 -->
                                    <button type="button" class="btn btn-light">
                                        <i class="bi bi-share"></i> 转发
                                    </button>
                        
                                    <!-- 下载按钮 -->
                                    <button type="button" class="btn btn-light">
                                        <i class="bi bi-download"></i> 下载
                                    </button>
                        
                                    <!-- 评论按钮 -->
                                    <button type="button" class="btn btn-light">
                                        <i class="bi bi-chat"></i> 评论
                                    </button>
                                </div>
                            </div>
                            

                        </div>

                    </div>

                    <!-- 表格行 -->
                    <div class="row">
                        <!-- 歌曲列表 -->
                        <div class="row">
                            <span name="music_list">歌曲列表</span>
                        </div>

                        <table class="table">
                            <thead style="border-top-left-radius: 3px;">
                                <tr>
                                    <th scope="col">排名</th>
                                    <th scope="col">歌曲</th>
                                    <th scope="col">歌手</th>
                                    <th scope="col">专辑</th>
                                    <th scope="col">时长</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="rank">1</td>
                                    <td><a href="#">夜曲</a></td>
                                    <td><a href="#">周杰伦</a></td>
                                    <td>十一月的萧邦</td>
                                    <td>4:20</td>
                                </tr>
                                <tr>
                                    <td class="rank">2</td>
                                    <td><a href="#">平凡之路</a></td>
                                    <td><a href="#">朴树</a></td>
                                    <td>平凡之路</td>
                                    <td>5:07</td>
                                </tr>
                                <tr>
                                    <td class="rank">3</td>
                                    <td><a href="#">演员</a></td>
                                    <td><a href="#">薛之谦</a></td>
                                    <td>演员</td>
                                    <td>4:21</td>
                                </tr>
                                <tr>
                                    <td class="rank">4</td>
                                    <td><a href="#">年少有为</a></td>
                                    <td><a href="#">李荣浩</a></td>
                                    <td>耳朵</td>
                                    <td>4:39</td>
                                </tr>
                                <tr>
                                    <td class="rank">5</td>
                                    <td><a href="#">起风了</a></td>
                                    <td><a href="#">买辣椒也用券</a></td>
                                    <td>起风了</td>
                                    <td>5:25</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="search.js"> </script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>